1import {useState, useMemo, PropsWithChildren} from 'react';
 2import EventLayout, {TabComponent} from '../../../layouts/Event';
 3import {EventByUuidDocument} from '../../../generated/graphql';
 4import useProfile from '../../../hooks/useProfile';
 5import WaitingList from '../../../containers/WaitingList';
 6import {AddPassengerToWaitingList} from '../../../containers/NewPassengerDialog';
 7import pageUtils from '../../../lib/pageUtils';
 8import Box from '@mui/material/Box';
 9import SupportCaroster from '../../../containers/SupportCaroster';
10
11interface NewPassengerDialogContext {
12  addSelf: boolean;
13}
14
15interface Props {
16  eventUUID: string;
17  announcement?: string;
18}
19
20const Page = (props: PropsWithChildren<Props>) => {
21  return <EventLayout {...props} Tab={WaitingListTab} />;
22};
23
24const WaitingListTab: TabComponent = ({event}) => {
25  const {userId} = useProfile();
26  const [addPassengerToWaitingListContext, toggleNewPassengerToWaitingList] =
27    useState<NewPassengerDialogContext | null>(null);
28
29  const canAddSelf = useMemo(() => {
30    if (!userId) return false;
31    const isInWaitingList = event?.waitingPassengers?.data?.some(
32      passenger => passenger.attributes.user?.data?.id === `${userId}`
33    );
34    const isInTravel = event?.travels?.data?.some(travel =>
35      travel.attributes.passengers?.data?.some(
36        passenger => passenger.attributes.user?.data?.id === `${userId}`
37      )
38    );
39    return !(isInWaitingList || isInTravel);
40  }, [event, userId]);
41
42  return (
43    <>
44      <WaitingList
45        canAddSelf={canAddSelf}
46        getToggleNewPassengerDialogFunction={(addSelf: boolean) => () =>
47          toggleNewPassengerToWaitingList({addSelf})}
48      />
49      <Box mt={4} display="flex" justifyContent="center">
50        <SupportCaroster />
51      </Box>
52      {!!addPassengerToWaitingListContext && (
53        <AddPassengerToWaitingList
54          open={!!addPassengerToWaitingListContext}
55          toggle={() => toggleNewPassengerToWaitingList(null)}
56          addSelf={addPassengerToWaitingListContext.addSelf}
57        />
58      )}
59    </>
60  );
61};
62
63export const getServerSideProps = pageUtils.getServerSideProps(
64  async (context, apolloClient) => {
65    const {uuid} = context.query;
66    const {host = ''} = context.req.headers;
67    let event = null;
68
69    // Fetch event
70    try {
71      const {data} = await apolloClient.query({
72        query: EventByUuidDocument,
73        variables: {uuid},
74      });
75      event = data?.eventByUUID?.data;
76    } catch (error) {
77      return {
78        notFound: true,
79      };
80    }
81
82    return {
83      props: {
84        eventUUID: uuid,
85        metas: {
86          title: event?.attributes?.name || '',
87          url: `https://${host}${context.resolvedUrl}`,
88        },
89      },
90    };
91  }
92);
93
94export default Page;